<template>
    <div class="cart">
        <!-- 头部导航 -->
        <div class="header">
            <van-nav-bar
                title="购物车"
            />
        </div>
        <!-- 商品 -->
        <div class="card">
            <van-swipe-cell
                style="margin-bottom: 2px;"
                v-for="(item, index) in list"
                :key="index"
            >
                <!-- 主体包裹 -->
                <div class="card-wrapper">
                    <!-- 复选框 -->
                    <input type="checkbox" class="checkbox" v-model="item.isChecked" >
                    <!-- 商品卡片 -->
                    <van-card
                        class="goods-card"
                        :num="item.number"
                        :price="item.retail_price + '.00'"
                        :title="item.goods_name"
                        desc="描述信息"
                        :thumb="item.list_pic_url"
                    />
                </div>
                <!-- 右侧删除插槽 -->
                <template #right>
                    <van-button @click="delCard(item.id)" square text="删除" type="danger" class="delete-button" />
                </template>
            </van-swipe-cell>
        </div>
        <!-- 操作栏 -->
        <van-submit-bar
            :price="cardCount"
            button-text="提交订单"
            @submit="onSubmit"
            class="footer"
        >
            <van-checkbox v-model="checkedAll">全选</van-checkbox>
        </van-submit-bar>
    </div>
</template>

<script>
import { addToCarInfo, getCartListInfo, DeleteActionInfo } from '@/api/cart/index'
import { Toast } from 'vant'
import { mapMutations } from 'vuex'

export default {
    data() {
        return {
            openId: localStorage.getItem('openId'),
            list: [],
        }
    },
    computed: {
        // 全选反选
        checkedAll: {
            get() {
                return this.list.every(el => el.isChecked == true)
            },
            set(isChecked) {
                this.list.forEach(el => {
                    el.isChecked = isChecked
                })
            }
        },
        // 求和
        cardCount() {
            this.setCount()
            if (this.list) {
                return this.list.reduce((count, val) => {
                    if (val.isChecked) {
                        return count += val.retail_price * val.number;
                    } else {
                        return count
                    }
                }, 0)*100
            } else {
                return 0
            }
        }
    },
    watch: {
        // 监听对象改变时
        list: {
            handler(newVal, oldVal) {
                // 提交数据到vuex
                this.setCount(this.cardCount);
                this.setOrderList(newVal);
            },
            deep: true
        },
    },
    methods: {
        ...mapMutations({
            setCount: 'setCount',
            setOrderList: 'setOrderList'
        }),
        // 提交
        onSubmit() {
            // 判断是否有商品选中
            if (this.list.some(el => el.isChecked == true)) {
                // 有选中就跳转到结算
                this.$router.push({ name: 'order'})
            } else {
                Toast.fail('请至少选中一件商品');
            }
        },
        // 删除商品
        delCard(id) {
            DeleteActionInfo({ id, })
            .then(res => {
                console.log(res);
                // 刷新购物车列表
                this.getCarList();
            })
        },
        // 获取购物车列表
        getCarList() {
            getCartListInfo({openId: this.openId})
            .then(res => {
                // 加上checkbox标识符
                res.data.forEach(el => {
                    el.isChecked = false
                });
                this.list = res.data
            })
        },
    },
    created() {
       // 开局获取购物车列表
        this.getCarList()
    }
}
</script>

<style lang="scss" scoped>
    .cart{
        width: 100%;
        height: calc(100vh - 1.333333rem);
        background: #f4f4f4;
        .header{
            background: #fff;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 9;
        }
        .card{
            width: 100%;
            margin-top: 1.226667rem;
            background: #f4f4f4;
            .card-wrapper{
                display: flex;
                background-color: #fff;
                .checkbox{
                    display: block;
                    width: 15px;
                    height: 104px;
                    margin: 0 0 0 15px;
                }
                .goods-card {
                    margin: 0;
                    flex-grow: 1;
                    padding-left: 0;
                    background-color: #fff;
                }
            }
            .delete-button {
                height: 100%;
            }
        }
        .footer{
            bottom: 1.333333rem;
        }
    }
</style>
<style scoped>

</style>
